<template>
  <page-container title="菜单管理">
    <!-- -------------搜索表单区域 ----------------->
    <el-form inline>
      <el-form-item label="搜索:">
        <el-input style="width: 240px" placeholder="菜单名称" v-model="parameter.menuName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="menuInit()">查询</el-button>
        <el-button type="success" plain @click="dialog.open()">新增</el-button>
      </el-form-item>
    </el-form>
    
    <el-table :data="filterTableData" style="width: 100%" row-key="menuId" border lazy :load="load" stripe
              :tree-props="{ children: 'children' }">
      <el-table-column type="index" width="80" label="序列号" />
      <el-table-column prop="menuName" label="菜单名" :type="expand">
      </el-table-column>
      <el-table-column prop="icon" label="图标">
        <template #default="{ row }">
          <el-icon>
            <component :is="row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="menuType" label="类型" />
      <el-table-column prop="parentId" label="父ID" />
      <el-table-column prop="path" label="路径" />

      <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="{row}">
        <el-button link type="primary" size="small" @click="handleClick(row.menuId)">
          Detail
        </el-button>
        
        <el-button link type="primary" size="small" @click="dialog.openUP(row)">
          Edit
        </el-button>
      </template>
    </el-table-column>

    </el-table>
    <menuDialog ref="dialog" @catalogue="catalogueNameList"  @success="onSuccess"></menuDialog>
  </page-container>

</template>

<script setup>
import { computed, ref } from 'vue'
import { getMenuList ,deleteMenu} from '@/api/sys/menu'
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete } from '@element-plus/icons-vue'
import menuDialog from '@/components/MenuDialog.vue'

const dialog = ref()

//  查询条件
const parameter = ref({
  status: '0',//状态 
  menuName: '',//检索关键字
})

// 目录名列表
const catalogueNameList = ref([])

// 菜单初始化
// const loading = ref(true)
let filterTableData = ref()
const menuInit = async () => {
  const res = await getMenuList(parameter.value)
  filterTableData.value = res.data.data
  filterTableData.value.forEach((item) => {
    catalogueNameList.value.push({
      lable: item.menuName,
      value: item.menuId
    })
  })
  dialog.value.selectml()
  // catalogueNameList.value=
 
}
menuInit()

// 删除
async function handleClick(menuId){
  try {
    await deleteMenu(menuId)
    menuInit()
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  } catch (e) {
    ElMessage({
      message: '删除失败',
      type: 'error',
    })
  }
}


// 状态选项
const options = [
  {
    value: '0',
    label: '启用',
  },
  {
    value: '1',
    label: '禁用',
  }
]

</script>
<style lang="scss" scoped>
.manager-table {
  height: 62.5vh;
  overflow: auto;
}
</style>